<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .row-left{
    text-align: center;
    // border-right: 1px solid lightgray;
    // background-color: #eeeef7;
  }
  .title-top{
    margin-bottom:10px;
    color: #1C86EE;
    font-size: 1rem;
    border-bottom: 1px solid orangered;
    font-size: 20px;
    color: coral;
  }
  .content{
    background-color:white;
    height: auto;
    border: 1px solid lightgray;
    width: 100%;
    padding: 0px;
  }
  .idCard{
    width: 170px;
    height: 80px;
    background-color: #79e428;
    position: absolute;
    right: 2%;
    top: 13%;
    color: white;
    font-size: 1.5rem;
    line-height: 80px;
    text-align: center;
  }
  .ivu-steps-item {
    display: initial;
    position: relative;
    vertical-align: initial;
  }
  .step-item {
    float: left;
    margin-left: 0px;
  }
  .red-name{
    color: red
  }
  .navi-title {
    height:30px;
    background-color:#f8f8f9;
    line-height:30px;
    padding-left: 15px;
    color: #5CACEE;
    font-size: 0.7rem;
    font-weight: bold;
  }
</style>
<template>
  <div style="background-color:white">
    <div style="">
      <Row class="title-top">
        <Col span="4" style="text-align: left;width:22%">特困人员身份确认申请登记</Col>
      </Row>
    </div>
    <div style="height:30px;">
      <Steps :current="1" style="margin-bottom:10px" size="small">
        <div @click="nextStep('0')" class="step-item">
          <Step title="申请人基本信息" content=""></Step>
        </div>
        <div @click="nextStep('1')" class="step-item">
          <Step title="申请人详细信息" content=""></Step>
        </div>
        <div @click="nextStep('2')" class="step-item">
          <Step title="基础收入" content=""></Step>
        </div>
        <div @click="nextStep('3')" class="step-item">
          <Step title="赡（抚、扶）养" content=""></Step>
        </div>
        <div @click="nextStep('4')" class="step-item">
          <Step title="基础财产" content=""></Step>
        </div>
        <div @click="nextStep('5')" class="step-item">
          <Step title="财产-房产" content=""></Step>
        </div>
        <div @click="nextStep('6')" class="step-item">
          <Step title="办理要件" content=""></Step>
        </div>
        <div @click="nextStep('7')" class="step-item">
          <Step title="申请受理" content=""></Step>
        </div>
      </Steps>
    </div>
    <div class="content">
      <div class="navi-title">
        家庭成员信息
      </div>
      <div style="height:30px;margin-top:3px" ref="paramData" :rules="ruleValidate">
        <Button type="info" class="step-item" style="margin-left:5px" size="small" @click="entry()">查询</Button>
        <Modal v-model="modal" title="编辑家庭成员" width="1100" cancel-text="关闭"
          style="position:relative;">
          <Row class="item1">
            <Col span="4" style="text-align: center" class="red-name">姓名:</Col>
            <Col span="4">
              <Input v-model="paramData.azcp0003" placeholder=""></Input>
            </Col>
            <Col span="4" style="text-align: center" class="red-name">证件类型:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0002">
                <Option :value="obj.key" v-for="obj in data2.CertificateTypeDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="red-name">证件号码:</Col>
            <Col span="4">
              <Input v-model="paramData.azcp0001" placeholder=""></Input>
            </Col>
            <Col span="4" style="text-align: center" class="red-name">户籍类别:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0013">
                <Option :value="obj.key" v-for="obj in data2.RegisterTypeDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="red-name">民族:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0007">
                <Option :value="obj.key" v-for="obj in data2.nationDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
            <Col span="4" style="text-align: center" class="">文化程度:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0008">
                <Option :value="obj.key" v-for="obj in data2.EducationDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="">政治面貌:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0012">
                <Option :value="obj.key" v-for="obj in data2.PoliticalOutlookDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
            <Col span="4" style="text-align: center" class="">婚姻状况:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0010">
                <Option :value="obj.key" v-for="obj in data2.MaritalStatusDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="red-name">健康状况:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0009">
                <Option :value="obj.key" v-for="obj in data2.HealthDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
            <Col span="4" style="text-align: center" class="">残疾类别:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0504" :disabled="paramData.azcp0009 == '10' || paramData.azcp0009 == '20' || paramData.azcp0009 == '30' || paramData.azcp0009 == '40'">
                <Option :value="obj.key" v-for="obj in data2.DisabilityTypeDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
            <Col span="4" style="text-align: center" class="">残疾等级:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0505" :disabled="paramData.azcp0009 == '10' || paramData.azcp0009 == '20' || paramData.azcp0009 == '30' || paramData.azcp0009 == '40'">
                <Option :value="obj.key" v-for="obj in data2.DisabilityClassDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="">残疾等级评定时间:</Col>
            <Col span="4">
              <DatePicker type="date" v-model="paramData.azcp0506" style="width: 178px" :disabled="paramData.azcp0009 == '10' || paramData.azcp0009 == '20' || paramData.azcp0009 == '30' || paramData.azcp0009 == '40'"></DatePicker>
            </Col>
            <Col span="4" style="text-align: center" class="">现居住地开始居住时间:</Col>
            <Col span="4">
              <DatePicker v-model="paramData.azcp0501" type="date" style="width: 178px"></DatePicker>
              <!-- <DatePicker v-model="paramData.azcp0501" format="yyyy年MM月dd日" type="date" style="width: 178px"></DatePicker> -->
            </Col>
            <Col span="4" style="text-align: center" >劳动能力丧失情况:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0502">
                <Option :value="obj.key" v-for="obj in data2.WorkAbilityDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="red-name">生活自理能力:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0513">
                <Option :value="obj.key" v-for="obj in data2.SelfcareAbilityDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="">养老保险参保类型:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0526">
                <Option :value="obj.key" v-for="obj in data2.PensionTypeDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
            <Col span="4" style="text-align: center" class="">是否参加医疗保险:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0527">
                <Option :value="obj.key" v-for="obj in data2.YesOrNoDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
            <Col span="4" style="text-align: center" class="">医疗保险参保类型:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0528" :disabled="paramData.azcp0527 == '0'">
                <Option :value="obj.key" v-for="obj in data2.InsuredTypeDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="">是否参加失业保险:</Col>
            <Col span="4">
              <Select v-model="paramData.azcp0531">
                <Option :value="obj.key" v-for="obj in data2.YesOrNoDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
            <Col span="4" style="text-align: center" class="">社保编号或新农合编号:</Col>
            <Col span="4">
              <Input v-model="paramData.azcp0529" placeholder=""></Input>
            </Col>
            <Col span="4" style="text-align: center" class="">社保卡号或新农合卡号:</Col>
            <Col span="4">
              <Input v-model="paramData.azcp0530" placeholder=""></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="4" style="text-align: center" class="">备注说明:</Col>
            <Col span="20">
              <Input v-model="paramData.azcp0543" placeholder=""></Input>
            </Col>
          </Row>
          <img :src="nophoto" alt="..." style="height: 160px; width:120px;position:absolute;right:20%;top:9%;">
          <div slot="footer">
            <Button type="text" size="large" @click="modal = false">取消</Button>
            <Button type="primary" size="large" @click="ok111(paramData)">确定</Button>
          </div>
        </Modal>
      </div>
      <div>
        <Table :columns="columns1" :data="data3"></Table>
        <div style="margin: 10px;overflow: hidden">
    </div>
      </div>
    </div>
    <div style="height:40px;line-height:40px;float:left;margin-top:10px;margin-left:40%">
      <Button type="info" @click="next()">下一步></Button>
    </div>
  </div>
</template>
<script>
import { getTKAppraising, date2str, iteminf, updateOrder } from '@/api/eventlist'
import nophoto from '@/assets/images/nophoto.jpeg'
export default {
  data () {
    return {
      info: {},
      itemData: {},
      next_params: {},
      itemid: this.$route.params.itemid || '',
      family_url: '',
      info_url: '',
      add_url: '',
      update_url: '',
      delete_url: '',
      see: this.$route.params.see || false,
      code: this.$route.params.code,
      url: 'dbsq/addPersonInfo',
      str: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      errorTitle: '保存错误',
      columns1: [
        {
          title: '姓名',
          key: 'azcp0003',
          width: '80px'
        },
        {
          title: '证件号码',
          key: 'azcp0001',
          width: '160px'
        },
        {
          title: '性别',
          key: 'azcp0004',
          width: '70px'
        },
        {
          title: '证件类型',
          key: 'card_type'
        },
        {
          title: '户籍类别',
          key: 'azcp0013'
        },
        {
          title: '民族',
          key: 'azcp0007',
          width: '70px'
        },
        {
          title: '健康状况',
          key: 'azcp0009'
        },
        {
          title: '生活自理能力',
          key: 'azcp0513',
          width: '140px'
        },
        {
          title: '操作',
          key: 'cardno',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.index)
                  }
                }
              }, '编辑')
            ])
          }
        }
      ],
      temp: {
        hjcity: '',
        hjarea: ''
      },
      paramData: {
        azcp0507: '',
        azcp0502: '',
        azcp0543: '',
        azcp0027: '',
        azcp0024: '',
        azcp0541: '',
        azcp0025: '',
        azcp0547: '',
        azcp0545: '',
        azcp0023: '',
        azcp0540: '',
        azcp0539: '',
        azcp0013: '',
        azcp0530: '',
        azcp0531: '',
        azcp0018: '',
        azcp0011: '',
        azcp0012: '',
        azcp0010: '',
        azcp0529: '',
        azcp0527: '0',
        azcp0002: '',
        azcp0003: '',
        azcp0520: '',
        azcp0008: '',
        azcp0525: '',
        azcp0009: '',
        azcp0526: '',
        azcp0006: '',
        azcp0007: '',
        azcp0524: '',
        azcp0001: '',
        azcp0517: '',
        azcp0514: '',
        azcp0512: '',
        azcp0513: '',
        azcp0020: '',
        azcp0510: '',
        azcp0518: '',
        azcp0519: '',
        azcp0523: '',
        azcp0508: '',
        ss11002Id: this.$route.params.uuid
      },
      ruleValidate: {
        azcp0003: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ]
      },
      data1: [],
      data2: [],
      data3: [],
      formLeft: {
        input1: ''
      },
      modal: false,
      nophoto,
      form_params: {
        ss11001Data: {},
        ss11002Data: {},
        ss11003Data: [],
        ss11005Data: [],
        ss11006Data: [],
        ss11007Data: [],
        ss11010Data: [],
        ss12002Data: {}
      }
    }
  },
  methods: {
    nextStep (step) {
      console.log(this.next_params, '传到下一页的数据')
      if (step === '0') {
        this.$router.push({
          name: 'tk_subsistenceapplication',
          params: this.next_params
        })
      } else if (step === '2') {
        this.$router.push({
          name: 'tk_subsistenceapplication2',
          params: this.next_params
        })
      } else if (step === '3') {
        this.$router.push({
          name: 'tk_supportlist',
          params: this.next_params
        })
      } else if (step === '4') {
        this.$router.push({
          name: 'tk_basicproperty',
          params: this.next_params
        })
      } else if (step === '5') {
        this.$router.push({
          name: 'tk_houseproperty',
          params: this.next_params
        })
      } else if (step === '6') {
        this.$router.push({
          name: 'tk_nearfamily',
          params: this.next_params
        })
      } else if (step === '7') {
        const content = '<p>请先上传要件</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
      }
    },
    getInfo (card_type, register_type, nation, health, selfcare) {
      console.log(card_type, register_type, nation, health, selfcare, '调用详情接口')
      var param = {
        'idcardNumber': this.idcardNumber,
        'dictsCode': 'ss11002',
        'serialNumber': this.str
      }
      getTKAppraising(param).then(res => {
        this.data2 = res.data.data.data
        for (var i in this.data2.CertificateTypeDict) {
          if (this.data2.CertificateTypeDict[i].key === card_type) {
            this.data3[0].card_type = JSON.parse(JSON.stringify(this.data2.CertificateTypeDict[i].value))
            console.log(this.data3[0].card_type, '证件类型1')
          }
        }
        for (var j in this.data2.RegisterTypeDict) {
          if (this.data2.RegisterTypeDict[j].key === register_type) {
            this.data3[0].azcp0013 = this.data2.RegisterTypeDict[j].value
            console.log(this.data3[0].azcp0013, '户籍类别')
          }
        }
        for (var k in this.data2.nationDict) {
          if (this.data2.nationDict[k].key === nation) {
            this.data3[0].azcp0007 = this.data2.nationDict[k].value
            console.log(this.data3[0].azcp0007, '民族')
          }
        }
        for (var p in this.data2.HealthDict) {
          if (this.data2.HealthDict[p].key === health) {
            this.data3[0].azcp0009 = this.data2.HealthDict[p].value
            console.log(this.data3[0].azcp0009, '健康状况')
          }
        }
        for (var q in this.data2.SelfcareAbilityDict) {
          if (this.data2.SelfcareAbilityDict[q].key === selfcare) {
            this.data3[0].azcp0513 = this.data2.SelfcareAbilityDict[q].value
          }
        }
        console.log(this.data3, '家庭成员')
      })
    },
    ok111 (item1) {
      this.paramData.azcp0501 = date2str(this.paramData.azcp0501)
      delete this.paramData.azcp0519
      this.paramData.ss11002Id = this.$route.params.uuid
      this.form_params.ss11002Data = this.paramData
      let param = {
        item_id: this.$route.params.itemid,
        cardno: this.$route.params.cardno,
        form_params: this.form_params,
        code: this.$route.params.code
      }
      console.log(param, '入参')
      if (this.paramData.azcp0003 === '' || this.paramData.azcp0003 === undefined) {
        const content = '<p>请输入姓名</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.azcp0002 === '' || this.paramData.azcp0002 === undefined) {
        const content = '<p>请选择证件类型</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.azcp0001 === '' || this.paramData.azcp0001 === undefined) {
        const content = '<p>请填写证件号码</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.azcp0013 === '' || this.paramData.azcp0013 === undefined) {
        const content = '<p>请选择户籍类别</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.azcp0009 === '' || this.paramData.azcp0009 === undefined) {
        const content = '<p>请选择健康状况</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      updateOrder(param).then(res => {
        console.log(res, '调用接口返回来的数据')
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.getInfo(this.paramData.azcp0002, this.paramData.azcp0013, this.paramData.azcp0007, this.paramData.azcp0009, this.paramData.azcp0513)
          this.modal = false
        } else {
          const content = '<p>' + '操作失败' + '</p>'
          this.$Modal.error({
            title: this.errorTitle,
            content: content
          })
        }
      })
    },
    edit (item1) {
      this.modal = true
      this.getInfo()
    },
    next () {
      if (this.form_params.ss11002Data.azcp0013 === undefined) {
        const content = '<p>' + '请编辑个人信息' + '</p>'
        this.$Modal.error({
          title: '请编辑个人信息',
          content: content
        })
      } else {
        this.$router.push({
          name: 'tk_subsistenceapplication2',
          params: this.next_params
        })
      }
    },
    getGender (IDCard) {
      if (parseInt(IDCard.substr(16, 1)) % 2 === 1) {
        return '男'
      } else {
        return '女'
      }
    }
  },
  mounted () {
    let param2 = {
      'cardno': this.$route.params.cardno,
      'id': this.$route.params.itemid,
      'code': this.$route.params.code,
      'params': '1'
    }
    iteminf(param2).then(res => {
      this.data3 = []
      if (res.data.data) {
        var obj = (JSON.parse(res.data.data.form_params)).ss11001Data
        this.form_params.ss11001Data = obj
        console.log(obj, 'obj')
        obj.azcp0004 = this.getGender(this.$route.params.cardno)
        this.info = obj
        this.data3[0] = obj
        console.log(this.data3, 'data3')
        if ((JSON.parse(res.data.data.form_params)).ss11002Data) {
          this.form_params.ss11002Data = JSON.parse(res.data.data.form_params).ss11002Data
          this.paramData = this.form_params.ss11002Data
          this.paramData.azcp0003 = obj.azcp0003
          this.paramData.azcp0001 = obj.azcp0001
          this.getInfo(this.data3[0].azcp0002, this.paramData.azcp0013, this.paramData.azcp0007, this.paramData.azcp0009, this.paramData.azcp0513)
        } else {
          this.getInfo(this.data3[0].azcp0002, this.data3[0].azcp0013, this.data3[0].azcp0007, this.data3[0].azcp0009, this.data3[0].azcp0513)
        }
        this.paramData.azcp0003 = obj.azcp0003
        this.paramData.azcp0001 = obj.azcp0001
        if (JSON.parse(res.data.data.form_params).ss11003Data) {
          this.form_params.ss11003Data = JSON.parse(res.data.data.form_params).ss11003Data
        }
        if (JSON.parse(res.data.data.form_params).ss11005Data) {
          this.form_params.ss11005Data = JSON.parse(res.data.data.form_params).ss11005Data
        }
        if (JSON.parse(res.data.data.form_params).ss11006Data) {
          this.form_params.ss11006Data = JSON.parse(res.data.data.form_params).ss11006Data
        }
        if (JSON.parse(res.data.data.form_params).ss11007Data) {
          this.form_params.ss11007Data = JSON.parse(res.data.data.form_params).ss11007Data
        }
        if (JSON.parse(res.data.data.form_params).ss11010Data) {
          this.form_params.ss11010Data = JSON.parse(res.data.data.form_params).ss11010Data
        }
        if (JSON.parse(res.data.data.form_params).ss12002Data) {
          this.form_params.ss12002Data = JSON.parse(res.data.data.form_params).ss12002Data
        }
      }
    })
    this.next_params = {
      idcardNumber: this.$route.params.idcardNumber,
      code: this.$route.params.code,
      serialNumber: this.str,
      // see: this.see,
      itemid: this.$route.params.itemid,
      cardno: this.$route.params.cardno,
      uuid: this.$route.params.uuid
    }
    console.log(this.next_params, '传到后面的json')
    // 列表
  }
}
</script>
